<template>
  <div class="g-nav">
    <div class="warp">
      <ul class="nav">
        <li>
          <router-link to="/Home">
            <em>推荐</em>
          </router-link>
        </li>
        <li>
          <router-link to="/Home/toplist">
            <em>排行榜</em>
          </router-link>
        </li>
        <li>
          <router-link to="/Home/playList">
            <em>歌单</em>
          </router-link>
        </li>
        <li>
          <router-link to="/Home/Djradio">
            <em>主播电台</em>
          </router-link>
        </li>
        <li>
          <router-link to="/Home/artist">
            <em>歌手</em>
          </router-link>
        </li>
        <li>
          <router-link to="/Home/album">
            <em>新碟上架</em>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
  <div style="background-color:#f5f5f5">
    <div class="bd">
      <div class="sbd-l">
        <div class="sbd-lbd">
          <div class="sbd-wrap">
            <div class="sbd-info">
              <div class="scover">
                <div class="u-cover">
                  <img class="cov-img" :src="`${musicInfo.al.picUrl}?param=130y130`">
                  <span class="msk"></span>
                </div>
              </div>
              <div class="song-detail">
                <div class="hd">
                  <i class="icon hd-i"></i>
                  <h3 class="sname overel">{{musicInfo.name}}</h3>
                </div>
                <p class="des">
                  歌手：<a :href="`http://localhost:8080/#/songer?id=${item.id}`" v-for="(item, i) in musicInfo.ar"
                    :key="item.id">{{item.name}}
                    <i v-if="i!=musicInfo.ar.length-1">/</i></a>
                </p>
                <p class="des">
                  所属专辑：<a :href="`http://localhost:8080/#/album?id=${musicInfo.al.id}`">{{musicInfo.al.name}}</a>
                </p>
                <div class="btns">
                  <a @click="play(this.songId)" href="javascript:;" class="btn-2 btn-play" title="播放">
                    <i>
                      <em></em>播放
                    </i>
                  </a>
                  <a @click="addMu(this.songId)" href="javascript:;" class="btn-i btn-add" title="添加到播放列表">
                  </a>
                  <a href="javascript:;" class="btn-i btn-fav">
                    <i>收藏</i>
                  </a>
                  <a href="javascript:;" class="btn-i btn-share">
                    <i>分享</i>
                  </a>
                  <a href="javascript:;" class="btn-i btn-download">
                    <i>下载</i>
                  </a>
                  <a href="javascript:;" class="btn-i btn-cmt">
                    <i>({{commenttotal}})</i>
                  </a>
                </div>
                <div :class="['lyrics', 'overel', this.showLyrics ? 'hidden' : '']">
                  <p v-for="(item, i) in Lyrics" :key="i" class="overel">{{item}}</p>
                </div>
                <div style="margin-top:5px;">
                  <a href="javascript::" @click="this.showLyrics = !this.showLyrics"
                    class="showLyrics">{{this.showLyrics ? '收起':'展开'}}<i
                      :class="['icon',this.showLyrics? 'hidden-icon': '']"></i></a>
                </div>
              </div>
            </div>
            <div class="cmt">
              <HotCmt v-if="curPage==1" :hotComment="hotComment"></HotCmt>
              <NewCmt :commentInfo="commentInfo" :commenttotal="commenttotal"></NewCmt>
              <Page :curPage="curPage" :totalPage="totalPage" :midPagesList="midPagesList" @prev="prevPage"
                @next="nextPage" @changeP="changePage"></Page>
            </div>
          </div>
        </div>
      </div>
      <div class="sbd-r">
        <div class="srwrap">
          <h3 class="u-hd" v-if="simiPl.length != 0">
            <span>包含这首歌的歌单</span>
          </h3>
          <ul class="m-rctlist">
            <li v-for="item in simiPl" :key="item.id">
              <div class="cover">
                <a :href="`http://localhost:8080/#/playList?id=${item.id}`">
                  <img :src="`${item.coverImgUrl}?param=50y50`" alt="">
                </a>
              </div>
              <div class="info">
                <p class="overel">
                  <a class="tit" :href="`http://localhost:8080/#/playList?id=${item.id}`">{{item.name}}</a>
                </p>
                <p>
                  <span>by</span>
                  <a class="author" href="javascript:">{{item.creator.nickname}}</a>
                </p>
              </div>
            </li>
          </ul>
          <h3 class="u-hd">
            <span>相似歌曲</span>
          </h3>
          <ul class="m-sglist">
            <li v-for="item in simiSong" :key="item.id">
              <div class="sisong-l overel">
                <div class="name">
                  <a @click="update(item.id)" :href="`http://localhost:8080/#/song?id=${item.id}`">{{item.name}}</a>
                </div>
                <div>
                  <a v-for="(it, i) in item.artists" :key="it.id" class="author" href="javascript:;">{{it.name}}
                    <em v-if="i != (item.artists.length - 1)">/</em>
                  </a>
                </div>
              </div>
              <div class="sisong-r">
                <i @click="play(item.id)" class="icon2 play"></i>
                <i @click="addMu(item.id)" class="icon2 add"></i>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import page from '../components/Page/page.vue'
import hotcmt from '../components/cmt/hotcmt.vue'
import newcmt from '../components/cmt/newcmt.vue'
import { mapMutations } from 'vuex'
export default {
  name: 'song',
  components: {
    'Page': page,
    'HotCmt': hotcmt,
    'NewCmt': newcmt
  },
  data () {
    return {
      songId: this.$route.query.id,
      musicInfo: {},
      commenttotal: 0,
      commentInfo: [],
      Lyrics: {},
      showLyrics: false,
      hotComment: [],
      curPage: 1,
      totalPage: 0,
      midPagesList: [],
      simiPl: [],
      simiSong: []
    }
  },
  methods: {
    ...mapMutations(['addMusic', 'playMu']),
    async addMu (id) {
      let { data: mu } = await this.$http.get('song/detail', {
        params: {
          ids: id
        }
      })
      let muinfo = mu.songs
      this.addMusic(muinfo)
    },
    async play (id) {
      let { data: mu } = await this.$http.get('song/detail', {
        params: {
          ids: id
        }
      })
      let muinfo = mu.songs
      this.playMu(muinfo)
    },
    async info () {
      let { data: info } = await this.$http.get('song/detail', {
        params: {
          ids: this.songId
        }
      })
      this.musicInfo = info.songs[0]
      let { data: LyricsInfo } = await this.$http.get('lyric', {
        params: {
          id: this.songId
        }
      })
      this.Lyrics = this.formatLyrics(LyricsInfo.lrc.lyric)
      let { data: simipl } = await this.$http.get('simi/playlist', {
        params: {
          id: this.songId
        }
      })
      this.simiPl = simipl.playlists
      let { data: simisg } = await this.$http.get('simi/song', {
        params: {
          id: this.songId
        }
      })
      this.simiSong = simisg.songs
      let { data: cominfo } = await this.$http.get('comment/music', {
        params: {
          id: this.songId,
          limit: 20,
          offset: (this.curPage - 1) * 20
        }
      })
      this.commenttotal = cominfo.total
      this.commentInfo = cominfo.comments
      this.hotComment = cominfo.hotComments
      this.totalPage = Math.ceil(cominfo.total / 20)
      if (this.totalPage < 8) {
        let li = []
        for (let i = 2; i < this.totalPage; i++) {
          li.push(i)
          this.midPagesList = li
        }
        return
      }
      if (this.curPage <= 5 || this.curPage == 1) {
        this.midPagesList = [2, 3, 4, 5, 6, 7, 8]
        return
      }
      if (this.curPage >= this.totalPage - 4 || this.curPage == this.totalPage) {
        this.midPagesList = [this.curPage - 7, this.curPage - 6, this.curPage - 5, this.curPage - 4, this.curPage - 3, this.curPage - 2, this.curPage - 1]
        return
      }
      this.midPagesList = [this.curPage - 3, this.curPage - 2, this.curPage - 1, this.curPage, this.curPage + 1, this.curPage + 2, this.curPage + 3]
    },
    update (val) {
      this.songId = val
      this.info()
    },
    // 获取更多评论
    async getCmt () {
      let { data: cominfo } = await this.$http.get('comment/music', {
        params: {
          id: this.songId,
          limit: 20,
          offset: (this.curPage - 1) * 20
        }
      })
      this.commentInfo = cominfo.comments
      if (this.totalPage < 8) {
        let li = []
        for (let i = 2; i < this.totalPage; i++) {
          li.push(i)
          this.midPagesList = li
        }
        return
      }
      if (this.curPage <= 5 || this.curPage == 1) {
        this.midPagesList = [2, 3, 4, 5, 6, 7, 8]
        return
      }
      if (this.curPage >= this.totalPage - 4 || this.curPage == this.totalPage) {
        this.midPagesList = [this.curPage - 7, this.curPage - 6, this.curPage - 5, this.curPage - 4, this.curPage - 3, this.curPage - 2, this.curPage - 1]
        return
      }
      this.midPagesList = [this.curPage - 3, this.curPage - 2, this.curPage - 1, this.curPage, this.curPage + 1, this.curPage + 2, this.curPage + 3]
    },
    prevPage () {
      if (this.curPage == 1) {
        return
      } else {
        this.curPage--
        this.getCmt()
      }
    },
    nextPage () {
      if (this.curPage == this.totalPage) {
        return
      } else {
        this.curPage++
        this.getCmt()
      }
    },
    changePage (val) {
      if (this.curPage == val) {
        return
      }
      this.curPage = val;
      this.getCmt();
    },
    // 格式化单词
    formatLyrics (lyrics) {
      let reg = /\[.+?\]/g;
      let time = lyrics.match(reg);
      let contentArr = lyrics.split(/\[.+?\]/).slice(1); // 按照[]拆分歌词字符串, 返回一个数组(下标为0位置元素不要,后面的留下所以截取)
      let lyricTmpObj = {};
      time.forEach((e, index) => {
        // 拆分[00:00.000]这个格式字符串, 把分钟数字取出, 转换成秒
        let ms = e.split(":")[0].split("")[2] * 60;
        // 拆分[00:00.000]这个格式字符串, 把十位的秒拿出来, 如果是0, 去拿下一位数字, 否则直接用2位的值
        let ss =
          e.split(":")[1].split(".")[0].split("")[0] === "0"
            ? e.split(":")[1].split(".")[0].split("")[1]
            : e.split(":")[1].split(".")[0];
        // 秒数作为key, 对应歌词作为value
        if (contentArr[index] != "\n") {
          lyricTmpObj[ms + Number(ss)] = contentArr[index];
        }
      });
      return lyricTmpObj;
    },
    formatDate (date) {
      let d = date.split('-')
      return `${d[0]}年${d[1]}月${d[2]}日`
    }
  },
  created () {
    this.info()
  },
  watch: {
    $route (newVal, oldVal) {
      if (newVal.fullPath != oldVal.fullPath) {
        this.songId = newVal.query.id
        this.info()
      }
    }
  }
}
</script>

<style lang='less' scoped>
.bd {
  width: 980px;
  margin: 0 auto;
  min-height: 700px;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  margin-bottom: 53px;
  &::after {
    content: "";
    clear: both;
    visibility: hidden;
    display: block;
    height: 0;
  }
}
.sbd-l {
  float: left;
  width: 100%;
  margin-right: -270px;
}
.sbd-lbd {
  margin-right: 271px;
}
.sbd-wrap {
  padding: 47px 30px 40px 39px;
}
.sbd-r {
  float: right;
  width: 270px;
}
.sbd-info {
  display: flex;
  align-items: left;
  margin-top: -10px;
}
.scover {
  position: relative;
  width: 206px;
  margin-right: 20px;
}
.u-cover {
  width: 198px;
  height: 198px;
  position: relative;
  .cov-img {
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .msk {
    top: -4px;
    left: -4px;
    width: 206px;
    height: 205px;
    background-position: -140px -580px;
  }
}
.song-detail {
  width: 414px;
}
.hd {
  display: flex;
  justify-content: left;
  align-items: left;
}
.hd-i {
  width: 54px;
  height: 24px;
  background-position: 0 -463px;
}
.sname {
  position: relative;
  top: -6px;
  width: 350px;
  margin-left: 10px;
  font-size: 24px;
  font-weight: normal;
}
.des {
  margin: 10px 0;
  color: #999;
  a {
    color: #0c73c2;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
}
.lyrics {
  display: inline-block;
  margin-top: 10px;
  height: 299px;
  p {
    line-height: 23px;
  }
}
.showLyrics {
  color: #0c73c2;
  &:hover {
    text-decoration: underline;
  }
  .icon {
    display: inline-block;
    width: 11px;
    height: 8px;
    background-position: -65px -520px;
  }
}
.hidden {
  height: auto;
}
.showLyrics .hidden-icon {
  background-position: -45px -520px;
}
.cmt {
  margin-top: 40px;
}

.srwrap {
  padding: 20px 40px 40px 30px;
}
.u-hd {
  position: relative;
  margin-bottom: 20px;
  height: 23px;
  color: #333;
  border-bottom: 1px solid #ccc;
}
.m-rctlist,
.m-sglist {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
  li {
    display: flex;
    width: 200px;
    height: 50px;
    margin-bottom: 15px;
    line-height: 24px;
    .cover {
      position: relative;
      width: 50px;
      height: 50px;
      a {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
      }
    }
    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 140px;
      margin-left: 10px;
      .tit {
        font-size: 14px;
        width: 140px;
        &:hover {
          text-decoration: underline;
        }
      }
      span {
        color: #999;
      }
      .author {
        margin-left: 5px;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
.m-sglist li {
  height: 32px;
  .sisong-l {
    width: 156px;
    line-height: 16px;
    a {
      &:hover {
        text-decoration: underline;
      }
    }
    .author {
      color: #999;
    }
  }
  .sisong-r {
    display: flex;
    align-items: center;
    i {
      cursor: pointer;
    }
    .play {
      display: inline-block;
      margin-right: 16px;
      width: 10px;
      height: 11px;
      background-position: -69px -455px;
    }
    .add {
      display: inline-block;
      width: 10px;
      height: 11px;
      background-position: -87px -454px;
    }
  }
}
</style>